<template>
  <!-- 歌词封面 -->
  <div class="lyric_photo">
    <div class="mark">
      <img :src="currentPlaySong.al.picUrl" alt="" class="pic_url" />
    </div>
  </div>
</template>

<script>
import { defineComponent, inject } from "vue";
export default defineComponent({
  name: "LyricPhoto",
  setup() {
    let currentPlaySong = inject("currentPlaySong");
    return { currentPlaySong };
  },
});
</script>
<style scoped>
.lyric_photo {
  width: 25%;
  height: 100%;
  position: relative;
}
.mark {
  width: 70%;
  height: 42%;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 40%;
  left: 70%;
  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;
}

.pic_url {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  margin: 0 auto;
  animation: rotate 11.5s linear infinite forwards;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
